<template>
	<view class="container">
		<view class="blur-img">
			<img src="/static/1.jpg" alt="" />
		</view>

		<view class="content">
			<view class="status-show">直播已结束</view>
			<view class="num">{{num}}人看过</view>
			<img class="person-icon" src="/static/cusService.png" alt="" />
			<view class="detail">下场直播更精彩，敬请期待！</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				num: '999'
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		.blur-img {
			position: fixed;
			inset: 0;
			overflow: hidden;

			img {
				object-fit: cover;
				transform: scale(1.1);
				width: 100%;
				height: 100%;
				filter: blur(90px);
				overflow: hidden;
			}

		}


		.content {
			display: flex;
			flex-direction: column;
			align-items: center;
			position: absolute;
			top: 35%;
			left: 50%;
			transform: translate(-50%, -50%);

			.status-show {
				font-weight: 600;
				font-size: 36rpx;
				color: #2D7AF7;
				z-index: 2;
			}

			.num {
				color: #fff;
				margin-top: 30rpx;
			}

			.person-icon {
				width: 128rpx;
				height: 128rpx;
				z-index: 2;
				position: relative;
				display: block;
				margin-top: 78rpx;
			}
			.detail {
				font-size: 28rpx;
				color: rgba(255,255,255,0.5);
			}

		}
	}
</style>